<script setup>
import { reactive, onMounted, inject } from "vue";
import MoniterItem from "@/components/MoniterCard.vue";
import * as echarts from "echarts";

const $axios = inject("$axios");

const tableData = reactive([
  {
    placeName: "黄寨镇",
    placeType: "12",
    total: "22",
    yellows: "34",
    reds: "44",
    quarantine: "34",
  },
  {
    placeName: "黄寨镇",
    placeType: "12",
    total: "22",
    yellows: "34",
    reds: "44",
    quarantine: "34",
  },
  {
    placeName: "黄寨镇",
    placeType: "12",
    total: "22",
    yellows: "34",
    reds: "44",
    quarantine: "34",
  },
  {
    placeName: "黄寨镇",
    placeType: "12",
    total: "22",
    yellows: "34",
    reds: "44",
    quarantine: "34",
  },
  {
    placeName: "黄寨镇",
    placeType: "12",
    total: "22",
    yellows: "34",
    reds: "44",
    quarantine: "34",
  },
  {
    placeName: "黄寨镇",
    placeType: "12",
    total: "22",
    yellows: "34",
    reds: "44",
    quarantine: "34",
  },
  {
    placeName: "黄寨镇",
    placeType: "12",
    total: "22",
    yellows: "34",
    reds: "44",
    quarantine: "34",
  },
  {
    placeName: "黄寨镇",
    placeType: "12",
    total: "22",
    yellows: "34",
    reds: "44",
    quarantine: "34",
  },
]);

function getChartData(type) {
  $axios
    .get("person_back_home/backHomeStat", { params: { md: type } })
    .then((res) => {
      const xAxis = [];
      const data = [];
      res.data.data.forEach((item) => {
        xAxis.push(item.time);
        data.push(item.num);
      });
      option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xAxis,
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#007BFA",
              width: 1,
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "rgba(219,225,255,1)",
            },
          },
          splitLine: {
            //分割线配置
            show: false,
            lineStyle: {
              color: "rgba(219,225,255,1)",
            },
          },
        },
        yAxis: {
          name: "单位:个",
          type: "value",
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "rgba(219,225,255,1)",
              margin: 15,
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#007BFA",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            //分割线配置
            show: false,
            lineStyle: {
              color: "rgba(219,225,255,.3)",
            },
          },
        },
        series: [
          {
            data: data,
            type: "bar",
            barMaxWidth: 20,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#21D0FF" },
                { offset: 1, color: "#007BFA " },
              ]),
            },
            // emphasis: {
            //   itemStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //       { offset: 0, color: "#2378f7" },
            //       { offset: 0.7, color: "#2378f7" },
            //       { offset: 1, color: "#83bff6" },
            //     ]),
            //   },
            // },
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize);
    });
}

var dom;
var myChart;
var option;

var domPie;
var myChartPie;
var optionPie;

onMounted(() => {
  // 饼图
  domPie = document.getElementById("centerPie");
  myChartPie = echarts.init(domPie, null, {
    renderer: "canvas",
    useDirtyRect: false,
  });

  getChartDataPie("月");
});

function getPersonInfo() {
    /*报错，而且以后会删除此接口
  $axios.get("person_info/personStat").then((res) => {
    res;
  });*/
}

function getChartDataPie(type) {
  $axios
    .get("place_scan_rec/placeSaceRate", { params: { period: type } })
    .then((res) => {
      const data = [];
      res.data.data.forEach((item) => {
        data.push({
          value: item.times,
          name: item.name,
        });
      });
      optionPie = {
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "1%",
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        // legend: {
        //   top: "21%",
        //   orient: "vertical",
        //   right: "7%",
        //   formatter: function (name) {
        //     // 获取legend显示内容
        //     let data = option.series[0].data;
        //     let total = 0;
        //     let tarValue = 0;
        //     for (let i = 0, l = data.length; i < l; i++) {
        //       total += data[i].value;
        //       if (data[i].name == name) {
        //         tarValue = data[i].value;
        //       }
        //     }
        //     let p = ((tarValue / total) * 100).toFixed(2);
        //     return name + " " + " " + p + "%";
        //   },
        //   textStyle: {
        //     //图例字体大小
        //     color: "#fff",
        //     fontSize: 16,
        //   },
        //   //图例大小
        //   itemHeight: 20,
        //   itemWidth: 30,
        //   //图例滚动显示
        //   type: "scroll",
        //   //图例纵向显示
        // },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["90%", "100%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "小区", itemStyle: { color: "#3E9DFF" } },
              { value: 735, name: "超市", itemStyle: { color: "#1ACFFF" } },
              { value: 580, name: "医院", itemStyle: { color: "#42FBFE" } },
              { value: 484, name: "公共场所", itemStyle: { color: "#37FAC6" } },
            ],
          },
        ],
      };

      //optionPie.series[0].data = data;
      if (optionPie && typeof optionPie === "object") {
        myChartPie.setOption(optionPie);
      }

      window.addEventListener("resize", myChart.resize);
    });
}

const list = reactive([]);
list.arr = [
  {
    name: "医院",
    number: 146,
    persent: "11",
    added: "false",
    change: "17",
  },
  {
    name: "学校",
    number: 146,
    persent: "11",
    added: "false",
    change: "17",
  },
  {
    name: "商超",
    number: 146,
    persent: "11",
    added: "false",
    change: "17",
  },
  {
    name: "公交",
    number: 146,
    persent: "11",
    added: "false",
    change: "17",
  },
];
</script>

<template>
  <div class="showHeader">
    <div v-for="(item, index) in list.arr" :key="index" class="showHeaderItem">
      <div class="circle">{{ item.name }}</div>
      <div class="bot">
        <span style="width:5px;height:5px;border-radius:50%;background:#00EAFF;display:inline-block;"></span>
        场所数
        <span class="tips" style="color: rgba(37, 248, 69, 1)">{{
          item.change
        }}</span>
        个
      </div>
      <div class="bot">
        <span style="width:5px;height:5px;border-radius:50%;background:#00EAFF;display:inline-block;"></span>
        扫码数
        <span class="tips" style="color: rgba(37, 248, 69, 1)">{{
          item.change
        }}</span>
        个
      </div>
    </div>
  </div>
  <div class="centerImg">
    <div class="centerPie">
      <div id="centerPie" style="height: 100%; width: 100%"></div>
    </div>
    <div class="centerInfo">
      <div class="line1">
        <div class="pcount pcountPading">
          <div>常住人口</div>
          <div class="font16" style="color: #53facd">467</div>
        </div>
        <div class="pcount">
          <div>非常住人口</div>
          <div class="font16" style="color: #ffec86">467</div>
        </div>
      </div>
      <div class="font20" style="color: #ffba77">8576</div>
      <div class="font14">今日扫码总人数</div>
    </div>
  </div>
  <!-- <div class="centerBto">
    <div class="btoText">隔离人员扫码预警</div>
    <div style="height: calc(100% - 41px)" id="senceChart">
      <div class="line" style="font-size: 14px; font-weight:600;">
        <div style="flex: 0.5">排名</div>
        <div style="flex: 1">乡镇名称</div>
        <div style="flex: 0.8">场所数量</div>
        <div style="flex: 0.8">当日扫码数量</div>
      </div>
      <div style="height: 100%; font-size: 14px; overflow: auto" id="tableList2">
        <div
          :class="{ line: true, lineColor: index % 2 === 1 }"
          v-for="(item, index) in tableData"
          :key="index"
          ref="tableRef"
        >
          <div style="flex: 0.5" class="circle-box">
            <div class="circle">{{ index + 1 }}</div>
          </div>
          <div style="flex: 1">{{ item.placeName }}</div>
          <div style="flex: 0.8">{{ item.placeType }}</div>
          <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
        </div>
      </div>
    </div>
  </div> -->
  <div style="height: 21.5vh">
    <MoniterItem title="隔离人员扫码预警">
      <template #content>
        <div style="height: 12.8vh">
          <div class="line" style="font-size: 14px; font-weight:600;">
            <div style="flex: 0.5">排名</div>
            <div style="flex: 1">户标签</div>
            <div style="flex: 0.8">姓名</div>
            <div style="flex: 0.8">返乡时间</div>
            <div style="flex: 0.8">扫码场所</div>
            <div style="flex: 0.8">扫码时间</div>
            <div style="flex: 0.8">状态</div>
          </div>
          <div style="height: 100%; font-size: 14px; overflow: auto" id="tableList2">
            <div
              :class="{ line: true, lineColor: index % 2 === 1 }"
              v-for="(item, index) in tableData"
              :key="index"
              ref="tableRef"
            >
              <div style="flex: 0.5" class="circle-box">
                <div class="circle">{{ index + 1 }}</div>
              </div>
              <div style="flex: 1">{{ item.placeName }}</div>
              <div style="flex: 0.8">{{ item.placeType }}</div>
              <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
              <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
              <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
              <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
            </div>
          </div>
        </div>
      </template>
  </MoniterItem>
  </div>
</template>

<style lang="less" scoped>
.showHeader {
  color: white;
  height: 145px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(
    90deg,
    rgba(0, 92, 202, 0) 0%,
    #1b77e0 52%,
    rgba(0, 88, 197, 0) 100%
  );
  .showHeaderItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 120.5px;
    width: 122px;
  }
  .circle {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-image: url("../../../assets/921.png");
    background-size: 100% 100%;
    font-size: 16px;
    font-weight: bold;
  }
  .bot {
    font-size: 13px;
    .tips {
      font-size: 16px;
    }
  }
}
.centerImg {
  position: relative;
  margin-top: 23px;
  height: 431px;
  background-image: url("../../../assets/920.png");
  background-size: 590px 431px;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .centerPie {
    position: absolute;
    width: 250px;
    height: 250px;
  }
  .centerInfo {
    width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .line1 {
      color: white;
      font-size: 14px;
      .pcount {
        display: inline-block;
        text-align: center;
      }
      .pcountPading {
        padding-right: 20px;
      }
    }
  }
}
.font16 {
  font-size: 23px;
  font-weight: 600;
}
.font14 {
  color: white;
  font-size: 18px;
  font-weight: 600;
}
.font20 {
  font-size: 37px;
  font-weight: 600;
}
.centerBto {
  height: calc(100% - 166px - 431px);
  background-image: url("../../../assets/1020.png");
  background-size: 100% 100%;
  .btoText {
    color: white;
    font-size: 14px;
    height: 32px;
    line-height: 28px;
    text-align: center;
  }
}

// 表格样式
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}

.circle-box {
  display: flex;
  justify-content: center;
}

.circle {
  width: 21px;
  height: 21px;
  background-image: url('@/assets/circle.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
